<template>
<div class="wrap" v-if="data">
  <ComHeader title="商品详情" leftArrow='true' />
  <div class="wrap-head">
    <div class="swip">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(photo, index) in photos" :key="index">
          <img class="max" :src="URL.PIC+photo.run_photo" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="goods-info">
        <div class="title">
          {{data.title}}
        </div>
        <div class="prices">
          <div class="price">
            <span class="small">¥</span>{{data.new_price}}
            <span class="couponPrice" v-if="data.old_price">市场价：￥{{data.old_price}}</span>
          </div>
          <div class="sale">
            月销售{{data.Sales?data.Sales:'0'}}笔
          </div>
        </div>
    </div>
  </div>

  <div class="wrap-detail">
    <div class="wrap-detail-title">
      商品评价
      <span class="show-all-evaluation" @click="fnGoCommentList">查看全部></span>
      <!-- <i class="mint-cell-allow-right"></i> -->
    </div>
    <ul class="comment-list" v-if="commentList && commentList.length != 0">
      <template>
          <li v-for="(i, index) in commentList" :key="index" v-if="index<3">
            <div class="comment-head">
              <div class="comment-name">
                {{i.username}}
              </div>
              <div class="comment-date">
                {{i.commentDate}}
              </div>
            </div>
            <div class="comment-content">
              {{i.content}}
            </div>
        </li>
      </template>
      
    </ul>
    <div v-else class="notData">
      暂无评论
    </div>
  </div>

  <div class="wrap-detail">
    <div class="wrap-detail-title">
      商品详情
    </div>
    <div class="wrap-detail-main" v-for="(photo, index) in photos" :key="index">
      <img class="max" :src="URL.PIC+photo.run_photo">
    </div>
  </div>
</div>
</template>

<script>
import api from "@/fetch/api"
import { Swipe, SwipeItem,Indicator } from 'mint-ui';
import ComHeader from '@/common/ComHeader'
  export default {
    name: 'test',
    data() {
      return {
        data: null,
        // goodsId: this.getUrlParams('goodsId'),
        goodsId: this.$route.query.goodsId,
        commentList: null,
        photos: null
      };
    },
    components:{
      Swipe,
      SwipeItem,
      ComHeader,
      Indicator
    },
    mounted() {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      })
      // var goodsId = this.$route.query.goodsId
      console.log("goodsId",this.goodsId)
      this.getGoodsDetailData();
      this.getGoodsCommentData();
      this.getGoodsPhotosData();
    },
    methods: {
      /**
       * @desc 跳转评论列表
       */
      fnGoCommentList() {
        this.$router.push({path: '/evaluation', query: {title: this.$route.query.title}})
      },
      //获取商品详情
      getGoodsDetailData() {
        const params = {
          code: this.goodsId,
        };
        console.log("params",params)
        api.getGoodsDetail(params)
        .catch(res => {
          console.log("res",res)
          Indicator.close()
          this.data = res.data;
          this.print(res);
        })
      },

      //获取商品banner图
      getGoodsPhotosData() {
        const params = {
          code: this.goodsId,
        };
        api.getCommodityPhotos(params)
          .catch(res => {
            this.photos = res.data;
            this.print(res);
          })
      },

      //获取商品评论
      getGoodsCommentData() {
        console.log('评论接口')
        const params = {
          com_type:'all',
          goods_type: 'machine',
          machine_name: this.$route.query.title ? this.$route.query.title : '',
        };
        
        api.getGoodsVal(params)
          .catch(res => {
            this.commentList = res.data.results;
          })
      },
      //商品图片
      DoImages(imgs) {
        return imgs.split(',');
      }
    }
  };
</script>

<style lang="stylus" scoped>
.swip{
  height: 6rem;
}
.mint-cell-allow-right{
      position: absolute;
      right: 0px;
      top: 26px;
}
.goods-info{
    background-color: #fff;
    padding: .4rem;
    border-bottom: 1px solid #ddd;
    .couponPrice{
      color: #e64239;
      font-size: .32rem;
    }
    .title{
      font-size: .4rem;
      line-height: .54rem;
    }
    .prices{
      overflow: hidden;
      padding: .3rem 0;
      .price{
        float: left;
        color: #e64239;
        font-size: .46rem;
        .small{
          font-size: .36rem;
        }
      }
      .sale{
        float: right;
        color: #999;
        font-size: .34rem;
      }
    }
}
.wrap-detail{
  margin-top: .4rem;
  background-color: #fff;
  .wrap-detail-title{
    padding: .2rem;
    text-align: center;
    line-height: 1rem;
    position: relative;
    display:flex;
    align-items :center; 
    background-color: #fff;
    border-bottom:1px solid #eee;
    .show-all-evaluation{
      position :absolute;
      right: 0.4rem;
      color: #666;
      top: 10px;
      font-size: 0.35rem;
    }
  }
}
.comment-list{
  padding: .4rem;
  li{
    border: 1px solid #eee;
    padding: .3rem;
    border-radius:5px;
    margin-bottom:0.3rem;
  }
  .comment-head{
    overflow: hidden;
    margin-bottom: .3rem;
    display flex
    .comment-name{
      width 80%;
      flex 1
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      flex:1
    }
    .comment-date{
      float: right;
      color: #888;
    }
  }
  .comment-content{
    font-size: .46rem;
  }
}
.swip img{
  width: 100%;
  height: 100%;
}
</style>
